<template>
  <div class="shop-list">
    <div class="cart-header">
      <div class="cart-header-content">
        <p>
          <i
            class="el-icon-shopping-cart-full"
            style="color: rgb(207, 124, 124); font-weight: 600"
          ></i>
          我的购物车
        </p>
      </div>
    </div>

    <div>
      <el-checkbox v-model="checkAll" @change="handleCheckAllChange">
        <b>全选</b>
      </el-checkbox>
      <el-row v-for="date in tableData" :key="date.b">
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox :label="date" :key="date.b">
            <span>
              <img :src="date.url" alt="" />
              <i class="iconfont icon-mendian1"></i>
              <p style="font-size: 20px; font-family: fantasy">
                {{ date.merchant }}

                <a
                  href="/all"
                  style="
                    color: rgb(125, 125, 125);
                    margin-left: 10px;
                    font-size: 20px;
                  "
                >
                  >
                </a>
              </p>
              <p style="color: rgb(52, 52, 52); font-family: cursive">
                {{ date.description }}
              </p>

              <p
                style="
                  font-size: 15px;
                  color: rgb(125, 125, 125);
                  font-family: cursive;
                "
              >
                {{ date.specifications }}
              </p>

              <p style="font-size: 22px; margin-top: 15%">
                总计:{{ date.money }}
              </p>
            </span>
          </el-checkbox>

          <div class="el-input el-input"></div>
        </el-checkbox-group>
      </el-row>
    </div>
    <div>
      <el-card class="shop-list" style="text-align: ">
        <a href="/createOrder">
          <el-button type="danger" style="float: right; margin-bottom: 1rem">
            提交订单
          </el-button>
        </a>
        <span class="mar" style="float: right; margin-top: 10px">
          合计：{{ total }}元
        </span>
      </el-card>
    </div>
  </div>
</template>
<script>
const cityOptions = [
  {
    url: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
    merchant: "华麦基汉堡店",
    description: "老八秘制蟹黄堡，既实惠又管饱，来点小鸟伏特加。",
    specifications: "老八秘制套餐+小食+中可",
    money: "4644",
    address: "上海市普陀区金沙江路 1518 弄",
  }

];
import { getById } from '../api/shopcart.js'
import { getUserId } from '../utils/auth.js'


export default {
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      tableData: cityOptions,
      num: 1,
      total: 0,
      userid:''
    };
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.handleCheckedCitiesChange(this.checkedCities);
    },
    handleCheckedCitiesChange(value) {
      this.total = 0;
      value.forEach((element) => {
        this.total = this.total + parseInt(element.money);
      });
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.tableData.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.tableData.length;
    },
    //拉取该用户的数据
    fetchData() {
      //传入用户id
      getById(this.userid).then((res)=>{
        console.log(res);
        // this.checkedCities = res.data
      }).catch((err)=>{
        console.log(err);
      })
    }
  },
  mounted() {
    this.userid = getUserId();
    this.fetchData();

  },
};
</script>
<style scoped>
* {
  margin: auto;
}
.cart-header {
  height: 40px;
  background-color: #fff;
  font-size: 25px;
  color: rgb(207, 124, 124);
  border-bottom: 1px solid rgb(207, 124, 124);
}
.cart-header i {
  margin-left: 20px;
}
.mar {
  margin-right: 1rem;
}
.btn {
  text-decoration: none;
  color: black;
}
.bbb {
  margin-left: 40px;
  margin-top: 80px;
}
.aaa > label {
  display: block;
  text-align: left;
  margin-top: 20px;
}
.el-checkbox {
  display: block;
  text-align: left;
  margin-top: 1%;
  margin-left: 1%;
  width: 90vw;
}
.el-checkbox img {
  float: left;
}
.el-checkbox i {
  float: left;
  margin-top: 6%;
  margin-left: 5px;
}
.el-checkbox span {
  float: left;
  font-size: 17px !important;
}
.el-checkbox p {
  margin-left: 68%;
  margin-top: 6%;
}
.choice {
  margin: 10px 0px 10px 50px;
}
.iconfont {
  font-size: 20px;
  color: rgb(181, 110, 4) !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: black;
}
.el-card {
  margin-top: 40px;
}
.count {
  float: left;
  border: none;
}
.el-input-number .el-input__inner {
  text-align: left !important;
}
</style>
